<template>
  <view :class="['container', { category: isCategory }]" :style="appThemeStyle">
    <!-- 搜索框 -->
    <view class="search-wrap">
      <view class="search-content">
        <text class="iconfont" v-show="isCategory" @click="handleScan">&#xe6af;</text>
        <u-search
          class="search"
          :disabled="isCategory"
          placeholder="请输入编码/条码/名称查询"
          @click="toGoods"
          @search="onSearch"
          :show-action="false"
          v-model="searchValue"
        />
        <text class="iconfont" @click="showSearch = true">&#xe6ae;</text>
      </view>
    </view>
    <!-- 一级分类 -->
    <scroll-view v-if="isCategory" class="cate-left" :scroll-y="true" @touchmove.stop.prevent>
      <text class="type-nav" :class="{ selected: curIndex == -1 }" @click="handleSelectNav(-1)">所有商品</text>
      <text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index"
            @click="handleSelectNav(index)">{{ item.name }}</text>
    </scroll-view>

    <mescroll-body
      ref="mescrollRef"
      :sticky="true"
      @init="mescrollInit"
      :down="{ use: false }"
      :up="upOption"
      :bottombar="false"
      @up="upCallback"
    >
      <view class="cate-content">
        <!-- 子分类 -->
        <view v-if="subCateList.length" class="sub-cate-list clearfix" :class="{ 'display-fold': !showSubCate }" @touchmove.stop.prevent>
          <view class="nav-icon" @click="handleShowSubCate">
            <text class="iconfont" :class="[ showSubCate ? 'icon-arrow-up' : 'icon-arrow-down' ]"></text>
          </view>
          <view class="sub-cate-item" :class="{ selected: subIndex == -1 }" @click="handleSelectSubCate(-1)">
            <text>全部</text>
          </view>
          <view class="sub-cate-item" v-for="(item, index) in subCateList" :key="index" :class="{ selected: subIndex == index }"
                @click="handleSelectSubCate(index)">
            <text>{{ item.name }}</text>
          </view>
        </view>

        <!-- 商品列表 -->
        <view class="goods-list">
          <view class="goods-item" v-for="(item, index) in goodsList" :key="index">
            <!-- 临时处理：商品名称&图片取goods，其他数据取skuList[0] -->
            <view class="item-flex" v-if="item.skuList.length">
              <view class="item-radio" @click="handleCheckItem(item.skuList[0].id)" v-if="isCheckbox">
                <u-checkbox :modelValue="inArray(item.skuList[0].id, checkedIds)" shape="circle" :activeColor="appTheme.mainBg" />
              </view>
              <view class="image-wrap">
                <image :src="item.primaryPicUrl"></image>
                <view class="image-status" v-if="item.skuList[0].status === 0 || item.skuList[0].saleStatus === 0">{{item.skuList[0].status === 0 ? '停售' : (item.skuList[0].saleStatus === 0 && (item.skuList[0].isTempOff ? '临时下架' : (item.skuList[0].isManual === 0 ? '下架' : '手动下架')))}}</view>
              </view>
              <view class="goods-info">
                <view class="name">{{ item.goodsName || '--'}}</view>
                <view class="desc">编码：{{ item.skuList[0].skuCode || '' }}</view>
                <view class="desc">条码：{{ item.skuList[0].barcode || '' }}</view>
                <view class="custom">
                  <view class="area">
                    <view :class="['sync', { active: item.skuList[0].isReceiveStock }]">{{ item.skuList[0].isReceiveStock ? '接库存' : '停库存' }}</view>
                    <view :class="['sync', { active: item.skuList[0].isReceivePrice }]">{{ item.skuList[0].isReceivePrice ? '接价格' : '停价格' }}</view>
                  </view>
                  <view class="channel" v-if="item.skuList[0].channelStoreSkuList.length">
                    <text
                      v-for="(cItem, cIndex) in item.skuList[0].channelStoreSkuList"
                      :key="cIndex"
                      :style="{ backgroundColor: cItem.channelSaleStatus ? cItem.color : '#999' }"
                    >
                      {{ cItem.abbreviation || ''}}
                    </text>
                  </view>
                </view>
                <view class="price">
                  <view class="title">
                    ￥<text>{{ item.skuList[0].salePrice || 0 }}</text>
                  </view>
                  <view class="order">
                    <image src=""></image>
                    <text>库存{{ item.stock || 0 }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="btn-wrapper">
              <Permission code="ly_shop_goods_update,ly_store_goods_sku_update">
                <view class="btn-item" @click="handleGoods(item)">设置库存</view>
              </Permission>
              <Permission code="ly_shop_goods_update,ly_store_goods_sku_update">
                <view class="btn-item active" @click="handleMoney(item)">设置价格</view>
              </Permission>
              <Permission code="ly_shop_goods_sale_status_batch_update,ly_store_goods_sale_status_update">
                <view
                  :class="['btn-item', { active: !item.skuList[0].saleStatus }]"
                  @click="handleStatus(item)"
                >
                  {{ !item.skuList[0].saleStatus ? '上架' : '下架' }}
                </view>
              </Permission>
              <Permission code="ly_shop_goods_temp_offline,ly_store_goods_sku_temp_offline">
                <view class="btn-item" @click="handleTemporary(item)" v-if="item.skuList[0].saleStatus">临时下架</view>
              </Permission>
            </view>
          </view>
        </view>
        <!-- 遮罩层 -->
        <view class="mask" v-show="showSubCate" @touchmove.stop.prevent @click="handleShowSubCate" />
      </view>
    </mescroll-body>

    <!-- 批量按钮 -->
    <Permission code="ly_shop_goods_sale_status_batch_update,ly_store_goods_sale_status_update">
      <view class="batch-fixed" @click="handleBatch">
        <image :src="$image('/storeminiapp/batch-icon.png')"></image>
      </view>
    </Permission>

    <!-- 批量操作区 -->
    <view class="footer-fixed" v-if="isCheckbox">
      <view class="batch-wrap">
        <view class="left">
          <u-checkbox
            :modelValue="checkedIds.length > 0 && checkedIds.length === goodsList.length"
            shape="circle"
            :activeColor="appTheme.mainBg"
            @change="handleCheckAll"
          >全选</u-checkbox>
          <view class="batch-selected">选中{{ checkedIds.length }}</view>
        </view>
        <view class="right">
          <view class="right-item" @click="batchCheckStatus(1)">上架</view>
          <view class="right-item" @click="batchCheckStatus(2)">下架</view>
        </view>
      </view>
    </view>

    <!--上下架弹窗-->
    <u-modal
      v-model="showStatus"
      @confirm="confirmStatus"
      show-cancel-button
      :content="statusContent"
    ></u-modal>

    <!-- 设置库存-->
    <u-modal
      v-model="showGoods"
      title="设置库存"
      mask-close-able
      @confirm="confirmGoods"
      show-cancel-button
    >
      <view class="slot-content">
        <view class="slot-item mb30">
          <text class="slot-title">库存同步：</text>
          <u-switch v-model="skuInfo.isReceiveStock" size="36" @change="asyncChangeStock"></u-switch>
        </view>
        <view class="slot-item">
          <text class="slot-title">库存数量：</text>
          <u-number-box
            v-model="skuInfo.availableStock"
            maxlength="10"
            @change="stockValChange"
            :disabled="skuInfo.isReceiveStock"
          />
        </view>
      </view>
    </u-modal>

    <!--设置价格-->
    <u-modal
      v-model="showMoney"
      title="设置价格"
      mask-close-able
      @confirm="confirmMoney"
      show-cancel-button
    >
      <view class="slot-content">
        <view class="slot-item mb30">
          <text class="slot-title">价格同步：</text>
          <u-switch v-model="skuInfo.isReceivePrice" size="36" @change="asyncChangePrice"></u-switch>
        </view>
        <view class="slot-item">
          <text class="slot-title">价格：</text>
          <u-input
            v-model="skuInfo.salePrice"
            type="digit"
            :disabled="skuInfo.isReceivePrice"
            placeholder="请输入价格"
            :custom-style="{
              backgroundColor: skuInfo.isReceivePrice ? '#f7f8fa' : '#f5f7fa',
              borderRadius: '8rpx',
              paddingLeft: '20rpx',
              color: skuInfo.isReceivePrice ? '#c8c9cc' : '#303133'
            }"
            class="calc-width"
            @change="priceValChange"
          />
        </view>
      </view>
    </u-modal>

    <!--临时下架-->
    <u-modal
      v-model="showTemporary"
      title="临时下架"
      mask-close-able
      @confirm="confirmTemporary"
      show-cancel-button
    >
      <view class="slot-content">
        <view class="slot-item mb30">
          <text class="slot-title">下架时间：</text>
          <text class="slot-desc calc-width">立即下架</text>
        </view>
        <view class="slot-item" v-if="!onlineConfig.is_again_online">
          <text class="slot-title">再上架时间：</text>
          <view class="input-wrap">
            <view @click="showCalendar = true">
              <text>{{ shelfDate }}</text>
              <text class="iconfont gray">&#xe6c6;</text>
            </view>
            <view @click="showTime = true">
              <text class="select-hour">{{ shelfTime }}</text>
              <text class="hour-text">时</text>
            </view>
          </view>
        </view>
        <view class="slot-item again-text" v-else>
          <view class="m-b-10">点击确认立即执行下架,</view>
          <view>并将于次日 <text class="blue"> {{onlineConfig.sale_status_online_time_value}}: 00</text> 再次上架</view>
        </view>
      </view>
    </u-modal>

    <!--查询-->
    <u-popup
      v-model="showSearch"
      mode="bottom"
      :closeable="true"
      :safe-area-inset-bottom="true"
      border-radius="20"
      :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }"
    >
      <view class="popup-wrap">
        <view class="page-title">商品筛选</view>
        <scroll-view class="content-scroll" :scroll-y="true">
          <view class="cell-item">
            <view class="title">商品</view>
            <view class="select-list">
              <view
                :class="['select-item channel', { active: index === goodsStatusIndex }]"
                v-for="(item, index) in goodsStatusType"
                :key="index"
                @click="selectGoodsStatus(index)"
              >{{ item.title }}</view>
            </view>
          </view>
          <view class="cell-item">
            <view class="title">渠道</view>
            <view class="select-list">
              <view
                :class="['select-item channel', { active: index === channelIndex }]"
                v-for="(item, index) in channelList"
                :key="index"
                @click="selectChannel(item, index)"
              >{{ item.channelName }}</view>
            </view>
          </view>
          <view class="cell-item">
            <view class="title">未同步</view>
            <view class="select-list">
              <view
                :class="['select-item channel', { active: index === syncIndex }]"
                v-for="(item, index) in syncType"
                :key="index"
                @click="selectSync(item, index)"
              >{{ item.title }}</view>
            </view>
          </view>
        </scroll-view>
        <view class="btn-wrapper">
          <view class="btn-item" @click="handleReset">重置</view>
          <view class="btn-item active" @click="handleSearch">筛选</view>
        </view>
      </view>
    </u-popup>

    <!-- 日历组件 -->
    <u-calendar
      :min-date="minDate"
      :max-date="maxDate"
      v-model="showCalendar"
      mode="date"
      @change="changeDate"
    />

    <!-- 选择hour -->
    <u-picker
      v-model="showTime"
      mode="selector"
      :default-selector="defaultSelector"
      :range="selector"
      @confirm="confirmHour"
    />
  </view>
</template>
<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
import store from '@/store'
import { inArray, cloneObj } from '@/utils/util'
import * as StoreApi from '@/api/store'
import * as GoodsApi from '@/api/goods'

const goodsStatusType = [
  {
    title: '全部',
    value: ''
  },
  {
    title: '自动下架',
    value: 0
  },
  {
    title: '上架',
    value: 1
  },
  {
    title: '手动下架',
    value: 2
  },
  {
    title: "临时下架",
    value: 3
  }
]

const syncType = [
  {
    title: '全部',
    value: ''
  },
  {
    title: '未同步价格',
    value: 1
  },
  {
    title: '未同步库存',
    value: 2
  }
]


export default {
  name: "index",
  props: {
    // 分类列表
    list: {
      type: Array,
      default: []
    },
    // 设置项
    setting: {
      type: Object,
      default: () => {}
    },
    isCategory: {
      type: Boolean,
      default: true
    },
    // 扫码识别的商品条码
    barcode: {
      type: String,
      default: ''
    },
  },
  mixins: [MescrollMixin],
  data() {
    return {
      searchValue: '',
      inArray,
      // 一级分类：指针
      curIndex: -1,
      // 是否显示子分类
      showSubCate: false,
      // 二级分类：指针
      subIndex: -1,
      // 商品列表
      goodsList: getEmptyPaginateObj(),
      currentRow: {},
      // 上拉加载配置
      upOption: {
        // 首次自动执行
        auto: true,
        // 每页数据的数量; 默认10
        page: { size: 10 },
        // 数量要大于3条才显示无更多数据
        noMoreSize: 3,
        // 返回顶部
        toTop: { right: 30, bottom: 48, zIndex: 9 }
      },
      // 选中的商品ID记录
      checkedIds: [],
      // 开启选中框
      isCheckbox: false,
      // 上下架弹窗
      showStatus: false,
      // 上下架文案
      statusContent: '',
      // 设置库存弹窗
      showGoods: false,
      // 设置价格弹窗
      showMoney: false,
      // 临时下架弹窗
      showTemporary: false,
      // 查询弹窗
      showSearch: false,
      // 日期选择器
      showCalendar: false,
      // 时间选择器
      showTime: false,
      shelfDate: '',
      shelfTime: 0,
      minDate: '',
      maxDate: '',
      selector: [],
      defaultSelector: [],
      goodsStatusType,
      goodsStatusIndex: 0,
      syncType,
      syncIndex: 0,
      channelIndex: 0,
      onlineConfig: {}
    }
  },
  watch: {
    barcode(val) {
      if (val) {
        this.searchValue = val
      }
    }
  },
  computed: {
    // 二级分类列表
    subCateList() {
      if (this.list[this.curIndex] && this.list[this.curIndex].children) {
        return this.list[this.curIndex].children
      }
      return []
    },
    store() {
      return store.getters.store
    },
    channels() {
      return store.getters.channels
    },
    channelList() {
      const obj = {
        thirdChannelId: '',
        channelName: '全部'
      }
      return [obj, ...this.channels]
    },
    skuInfo() {
      return this.currentRow?.skuList?.[0] || {}
    },
    allChannels() {
      return store.getters.allChannels
    }
  },
  methods: {
    handleScan() {
      this.$emit('scan')
    },
    onSearch() {
      this.onRefreshList()
    },
    toGoods() {
      this.$emit('toGoods')
    },
    /**
     * 上拉加载的回调 (页面初始化时也会执行一次)
     * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
     * @param {Object} page
     */
    upCallback(page) {
      this.getGoodsList(page.num)
        .then(res => {
          const curPageLen = res.length
          this.mescroll.endBySize(curPageLen)
        })
        .catch(() => this.mescroll.endErr())
    },

    /**
     * 获取商品列表
     * @param {Number} current 页码
     */
    getGoodsList(current = 1) {
      return new Promise((resolve, reject) => {
        GoodsApi.getGoodsList({ ...this.queryParams(), current }, { load: false })
          .then(result => {
            const newList = result?.data || []
            if (this.allChannels) {
              newList.forEach(goods => {
                // 没有库存时availableStock返回的null
                goods.skuList[0].availableStock = goods.skuList[0].availableStock || ''
                goods.skuList[0].channelStoreSkuList = goods.skuList[0].channelStoreSkuList || []
                // 临时处理多规格品
                if (!goods.isSingle) {
                  goods.skuList[0].saleStatus = goods.saleStatus
                  goods.skuList[0].status = goods.status
                }
                goods.skuList[0].channelStoreSkuList.forEach(item => {
                  const channelInfo = this.allChannels.find(channel => channel.channelId === item.channelId)
                  if (channelInfo) {
                    const { channelName, abbreviation, icon, color } = channelInfo
                    Object.assign(item, { channelName, abbreviation, icon, color })
                  }
                })
              })
            }
            this.goodsList = getMoreListData(newList, this.goodsList, current)
            resolve(newList)
          })
          .catch(reject)
      })
    },

    queryParams() {
      const params = {
        ...this.getCategoryId(),
        shopId: this.store.id,
        saleStatus: this.goodsStatusType[this.goodsStatusIndex].value,
        onlineChannel: this.channelList[this.channelIndex].thirdChannelId,
        receiveStatus: this.syncType[this.syncIndex].value
      }
      if (this.searchValue) params.searchCondition = this.searchValue
      return params
    },

    // 获取当前选择的分类ID
    getCategoryId() {
      if (this.subIndex > -1) {
        const categoryId = this.subCateList[this.subIndex].id
        return { categoryId }
      }
      const parentCategoryId = this.curIndex > -1 ? this.list[this.curIndex].id : ''
      return { parentCategoryId }
    },

    // 一级分类：选中分类
    handleSelectNav(index) {
      this.curIndex = index
      this.onRefreshList()
      this.showSubCate = false
      this.subIndex = -1
    },

    // 二级分类：选中分类
    handleSelectSubCate(index) {
      this.subIndex = index
      this.showSubCate = false
      this.onRefreshList()
    },

    // 刷新列表数据
    onRefreshList() {
      this.goodsList = getEmptyPaginateObj()
      setTimeout(() => this.mescroll.resetUpScroll(), 120)
    },

    // 切换子分类显示状态
    handleShowSubCate() {
      this.showSubCate = !this.showSubCate
    },
    // 选中商品
    handleCheckItem(shopGoodsId) {
      const { checkedIds } = this
      const index = checkedIds.findIndex(id => id === shopGoodsId)
      index < 0 ? checkedIds.push(shopGoodsId) : checkedIds.splice(index, 1)
    },
    // 全选事件
    handleCheckAll() {
      const { checkedIds, goodsList } = this
      this.checkedIds = checkedIds.length === goodsList.length ? [] : goodsList.map(item => item.id)
    },
    handleBatch() {
      this.isCheckbox = !this.isCheckbox
    },
    // 上下架
    handleGoodsSaleStatus(status, ids = [], isBatch = false) {
      const params = {}
      if (this.$checkModule('ly_store_goods_sale_status_update')) {
        params.storeSkuIds = ids
        params.saleStatus = status
      } else {
        params.shopGoodsIds = ids
        params.status = status
      }
      GoodsApi.batchSaleStatus(params).then(() => {
        this.onRefreshList()
        if (isBatch) this.batchClear()
      })
    },
    // 批量上下架
    batchCheckStatus(type) {
      if (!this.checkedIds.length) {
        this.$toast('请至少选择一个商品')
        return
      }
      this.handleGoodsSaleStatus(type === 1 ? 1 : 0, this.checkedIds, true)
    },
    batchClear() {
      this.checkedIds = []
      this.isCheckbox = false
    },
    handleStatus(item) {
      this.batchClear()
      this.currentRow = item
      this.statusContent = !item.saleStatus ? '是否确定要上架该商品?' : '是否确定要下架该商品?'
      this.showStatus = true
    },
    confirmStatus() {
      const { id, saleStatus } = this.skuInfo
      this.handleGoodsSaleStatus(saleStatus ? 0 : 1, [id])
    },
    handleGoods(item) {
      this.batchClear()
      this.currentRow = cloneObj(item)
      this.showGoods = true
    },
    confirmGoods() {
      const { id, availableStock,  isReceiveStock } = this.skuInfo
      const params = {
        isReceiveStock: isReceiveStock ? 1 : 0,
        stock: availableStock || 0
      }
      if (this.$checkModule('ly_store_goods_sku_update')) {
        params.id = id
      } else {
        params.shopGoodsId = id
      }
      const validate = new RegExp("^[0-9]*[1-9][0-9]*$")
      if (!isReceiveStock && !validate.test(availableStock)) {
        uni.showToast({
          title: "只能输入正整数"
        })
        this.showGoods = true
        return
      }
      GoodsApi.goodsUpdate(params).then(() => {
        this.onRefreshList()
      }).catch(err => {
        this.$toast(err.msg)
      })
    },
    stockValChange(val) {
      this.currentRow.stock = val.value
    },
    asyncChangeStock(val) {
      this.currentRow.isReceiveStock = val
    },
    handleMoney(item) {
      this.batchClear()
      this.currentRow = cloneObj(item)
      this.showMoney = true
    },
    confirmMoney() {
      const validate = new RegExp(/^[0-9]+([.]\d{1,2})?$/)
      let { salePrice, id, isReceivePrice } = this.skuInfo
      if (validate.test(salePrice)) {
        const params = {
          isReceivePrice: isReceivePrice ? 1 : 0,
          salePrice: salePrice > 99999.99 ? 99999.99 : salePrice
        }
        if (this.$checkModule('ly_store_goods_sku_update')) {
          params.id = id
        } else {
          params.shopGoodsId = id
        }
        GoodsApi.goodsUpdate(params).then(() => {
          this.onRefreshList()
        }).catch(err => {
          this.$toast(err.msg)
        })
      } else {
        this.$toast('保留两位小数')
        this.showMoney = true
      }
    },
    asyncChangePrice(val) {
      this.currentRow.isReceivePrice = val
    },
    priceValChange(val) {
      this.currentRow.salePrice = val.value
    },
    // 临时下架
    async handleTemporary(item) {
      this.batchClear()
      const { data } = await StoreApi.getTenantsUniversals({key: 'shop_goods_sale_status_config'}, { load: false })
      if (data?.config) {
        const config = JSON.parse(data.config)
        if (!config.sale_status_online_day_value) config.sale_status_online_day_value = 3
        this.onlineConfig = config
      }
      this.currentRow = cloneObj(item)
      this.selector = []
      const nowHours = this.$moment().add(1, 'hours').format("HH")
      for(let i = Number(nowHours); i < 24; i++) {
        this.selector.push(i)
      }
      const { is_again_online, sale_status_online_day_value, sale_status_online_time_value } = this.onlineConfig
      this.shelfDate = this.minDate = is_again_online ? this.$moment().add(1, 'days').format("YYYY-MM-DD") : this.$moment().format("YYYY-MM-DD")
      this.shelfTime = is_again_online ? sale_status_online_time_value : this.selector[this.selector.length - 1]
      this.maxDate = this.$moment().add(sale_status_online_day_value - 1, 'days').format("YYYY-MM-DD")
      this.defaultSelector = [this.selector.length]
      this.showTemporary = true
    },
    confirmTemporary() {
      if (!this.shelfDate) {
        return this.$toast('请选择下架日期')
      }
      if (!this.shelfTime) {
        return this.$toast('请选择下架时间')
      }
      const params = {
        shelfTime: `${this.shelfDate} ${this.shelfTime}:00:00`
      }
      if (this.$checkModule('ly_store_goods_sku_temp_offline')) {
        params.storeSkuId = this.skuInfo.id
      } else {
        params.shopGoodsId = this.currentRow.id
      }
      GoodsApi.temporaryOff(params).then(() => {
        this.onRefreshList()
      }).catch(err => {
        this.$toast(err.msg)
      })
    },
    changeDate(e) {
      this.shelfDate = e.result
      this.selector = []
      this.defaultSelector = [0]
      if (this.shelfDate > this.minDate) {
        for(let i = 0; i < 24; i++) {
          this.selector.push(i)
        }
      } else {
        const nowHours = this.$moment().add(1, 'hours').format("HH")
        for(let i = Number(nowHours); i < 24; i++) {
          this.selector.push(i)
        }
      }
      this.defaultSelector = [this.selector.length]
      this.shelfTime = this.selector[this.selector.length - 1]
    },
    confirmHour(e) {
      if (e.length) {
        this.defaultSelector = e
        this.shelfTime = this.selector[e[0]] >= 10 ? this.selector[e[0]] : '0' + this.selector[e[0]]
      }
    },
    selectGoodsStatus(index) {
      this.goodsStatusIndex = index
    },
    selectChannel(item, index) {
      this.channelIndex = index
    },
    selectSync(item, index) {
      this.syncIndex = index
    },
    handleSearch() {
      this.showSearch = false
      this.onRefreshList()
    },
    handleReset() {
      this.goodsStatusIndex = 0
      this.channelIndex = 0
      this.syncIndex = 0
    }
  }
}
</script>

<style scoped lang="scss">
.container {

  &.category {
    padding-left: 178rpx;
  }

  .search-wrap {
    position: fixed;
    top: var(--window-top);
    left: var(--window-left);
    right: var(--window-right);
    z-index: 9;
    background: #fff;

    .search-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14rpx 24rpx;

      .search {
        flex: 1;
        margin: 0 16rpx;
      }

      .iconfont {
        font-size: 40rpx;
        color: #666666;
      }
    }
  }

  // 分类内容
  .cate-content {
    z-index: 1;
    background: #fff;
    padding-top: 90rpx;
    min-height: 300rpx;
  }

  // 一级分类+二级分类 20
  .cate-left {
    position: fixed;
    top: calc(88rpx + var(--window-top));
    left: var(--window-left);
    bottom: var(--window-bottom);
    width: 178rpx;
    height: calc(100% - var(--window-top) - var(--window-bottom) - 90rpx) !important;
    background: #f8f8f8;
    color: #444;
  }

  // 左侧一级分类
  .type-nav {
    position: relative;
    height: 90rpx;
    z-index: 10;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 8rpx;

    &.selected {
      background: #fff;
      border-right: none;
      color: $main-bg;
      font-weight: 500;
    }
  }

  // 商品列表
  .goods-list {
    background: #fff;
    position: relative;

    .goods-item {
      padding: 24rpx 16rpx;
      border-bottom: 1rpx solid #f4f4f4;
      box-sizing: border-box;

      &:last-child {
        border: none;
      }

      .item-flex {
        display: flex;

        .item-radio {
          width: 50rpx;
        }

        .image-wrap {
          position: relative;
          width: 144rpx;
          height: 144rpx;
          margin-right: 10rpx;
          border: 2rpx solid #eeeeee;

          image {
            position: absolute;
            width: 100%;
            height: 100%
          }

          .image-status {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            color: #FFFFFF;
            background: linear-gradient(rgba(0,0,0,.4) 0,rgba(0,0,0,.4) 30%,rgba(44,56,116,.7) 0,rgba(44,56,116,.7) 70%,rgba(0,0,0,.4) 0);
            font-size: 24rpx;
            text-align: center;
            line-height: 160rpx;
          }
        }

        .goods-info {
          flex: 1;

          .name {
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
            line-height: 40rpx;
          }

          .desc {
            color: #999999;
            font-size: 24rpx;
            line-height: 35rpx;
          }

          .custom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 6rpx auto 10rpx;

            .area {
              display: flex;
              align-items: center;

              .sync {
                font-size: 20rpx;
                margin-right: 10rpx;
                color: red;

                &.active {
                  color: #2D71FD;

                }
              }
            }

            .channel {

              text {
                line-height: 24rpx;
                font-size: 20rpx;
                font-weight: 500;
                text-align: center;
                color: #ffffff;
                display: inline-block;
                width: 24rpx;
                height: 24rpx;
                transform: scale(0.9);
                border-radius: 4rpx;
                margin: 0 4rpx;

                &:nth-child(1) {
                  background: #fdd001;
                }

                &:nth-child(2) {
                  background: #47d034;
                }

                &:nth-child(3) {
                  background: #4ea1ff;
                }

                &:nth-child(4) {
                  background: #2d71fd;
                }

                &:nth-child(5) {
                  background: #d8d8d8;
                }
              }
            }
          }

          .price {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
              font-size: 32rpx;
              font-weight: 500;
              color: #333333;
            }

            .order {
              font-size: 24rpx;
              font-weight: 400;
              color: #666666;
              display: flex;
              align-items: center;

              image {
                width: 20rpx;
                height: 20rpx;
                margin-right: 10rpx
              }
            }
          }
        }
      }

      .btn-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 18rpx;

        .btn-item {
          margin-left: 16rpx;
          background: #ffffff;
          border: 1px solid #2d71fd;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          font-weight: 400;
          color: #2d71fd;
          border-radius: 8rpx;
          padding: 8rpx 10rpx;

          &.active {
            background: #007aff;
            color: #ffffff;
          }
        }
      }
    }

    .batch-footer {
      width: 1rpx;
      height: 96rpx;
    }
  }

  // 子分类
  .sub-cate-list {
    background-color: #fff;
    width: 100%;
    z-index: 9;
    padding: 8rpx 40rpx 0 14rpx;
    overflow: hidden;
    position: sticky;
    top: calc(88rpx + var(--window-top));

    &.display-fold {
      height: 86rpx;
    }

    .nav-icon {
      position: absolute;
      right: 16rpx;
      top: 12rpx;
      font-size: 40rpx;
      font-weight: bold;
    }

    .sub-cate-item {
      float: left;
      background: #f8f8f8;
      padding: 10rpx 30rpx;
      margin-right: 22rpx;
      margin-bottom: 24rpx;
      font-size: 26rpx;
      border-radius: 14rpx;
      border: 1rpx solid #f8f8f8;

      &.selected {
        color: $main-bg;
        border: 1rpx solid $main-bg;
      }
    }
  }

  // 子分类遮罩层
  .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in-out 0s;
  }

  .batch-fixed {
    width: 100rpx;
    height: 100rpx;
    position: fixed;
    bottom: 256rpx;
    right: 38rpx;
    text-align: center;
    border-radius: 50%;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx 4rpx rgb(0, 102, 255, .1);
    }
  }

  // 底部操作栏
  .footer-fixed {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    right: 0;
    z-index: 11;
    background: #fff;
    border-top: 2rpx solid #eee;
    // 设置ios刘海屏底部横线安全区域
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .batch-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 40rpx;
      background-color: #ffffff;

      .left {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        display: flex;
        justify-content: center;
        align-items: center;

        .batch-selected {
          margin-left: 20rpx;
          color: #2d71fd;
        }
      }

      .right {
        display: flex;

        .right-item {
          width: 88px;
          height: 32px;
          background: #2d71fd;
          border-radius: 2px;
          border: 1px solid #1890ff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 32rpx;
          font-size: 15px;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }

  .slot-content {
    padding: 30rpx 50rpx;

    .mb30 {
      margin-bottom: 30rpx;
    }

    .slot-item {
      display: flex;
      align-items: center;
      font-size: 28rpx;

      .slot-title {
        margin-right: 10rpx;
        width: 180rpx;
        text-align: right;
      }

      .calc-width {
        width: calc(100% - 190rpx);
      }

      .slot-desc {
        padding: 10rpx 20rpx;
        font-size: 28rpx;
        color: #333;
        display: inline-block;
        background: #f5f7fa;
        border-radius: 8rpx;
      }

      .input-wrap {
        font-size: 26rpx;
        padding: 10rpx;
        display: flex;
        align-items: center;
        border-radius: 8rpx;

        .gray {
          color: #999;
          margin-left: 10rpx;
        }

        .select-hour {
          width: 50rpx;
          padding: 0 10rpx;
          border: 1rpx solid #ccc;
          border-radius: 8rpx;
          margin: 0 10rpx;
        }
      }
    }

    .again-text {
      display: inline-block;
      margin-left: 40rpx;

      .m-b-10 {
        margin-bottom: 10rpx;
      }

      .blue {
        color: #0362FF;
        font-weight: bold;
      }
    }
  }

  .popup-wrap {
    padding: 32rpx 24rpx;

    .page-title {
      text-align: center;
      margin-bottom: 40rpx;
      font-size: 36rpx;
      font-weight: bold;
    }

    .content-scroll {
      max-height: 55vh;
    }

    .cell-item {
      padding: 24rpx 0;
      border-bottom: 1rpx solid #eee;

      .title {
        margin-bottom: 24rpx;
      }
    }

    .select-list {
      display: flex;
      flex-wrap: wrap;

      .select-item {
        margin-right: 16rpx;
        border-radius: 16rpx;
        background: #F8F8F8;
        font-size: 24rpx;
        color: #666666;
        width: 162rpx;
        line-height: 64rpx;
        text-align: center;

        &.active {
          background: #2D71FD;
          color: #ffffff;
        }

        &.channel {
          margin-bottom: 16rpx;

          &:nth-child(4n) {
            margin-right: 0;
          }
        }
      }
    }

    .date-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .date-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12rpx 20rpx;
        background: #F8F8F8;
        font-size: 24rpx;
        color: #cccccc;
        border-radius: 16rpx;

        .icon {
          margin-left: 30rpx;
        }
      }
    }

    .btn-wrapper {
      display: flex;
      justify-content: space-between;
      padding-top: 16rpx;

      .btn-item {
        width: 330rpx;
        height: 96rpx;
        line-height: 96rpx;
        text-align: center;
        background: #fff;
        font-size: 34rpx;
        border-radius: 16rpx;
        border: 2rpx solid #eee;

        &.active {
          background: $main-bg;
          color: #fff;
        }
      }
    }
  }

  /* 隐藏滚动条 */
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }

  scroll-view ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
  }
}
</style>
